<template>
  <el-form ref="searchForm" :inline="true" :model="model" class="column search-from pl20 pr20 pt10" label-width="75px">
    <!-- 行 -->
    <div v-for="(item, index) in fields" :key="index" class="row">
      <!-- 表单元素 -->
      <template v-for="(field, index2) in item">
        <el-form-item
          v-if="field.show !== false"
          :key="index + index2"
          :prop="field.field"
          :label="field.label"
          class="mr20"
        >
          <!-- 普通input -->
          <el-input
            v-if="field.type === 'input'"
            v-model="field.value"
            :placeholder="field.placeholder"
            autocomplete="off"
            clearable
            @change="v => change(field.field, v)"
          />
          <!-- 复合型下拉input -->
          <el-input
            v-if="field.type === 'selectInput'"
            v-model="field.value.value"
            :placeholder="field.placeholder"
            autocomplete="off"
            clearable
            @change="v => selectInputChange(field.field, v)"
          >
            <el-select
              slot="prepend"
              v-model="field.selectValue"
              style="width: 150px;"
              placeholder="请选择"
              @change="v => selectInputSelectChange(field.field, v)"
            >
              <el-option v-for="item in field.selectOptions" :key="item.key" :label="item.title" :value="item.key" />
            </el-select>
          </el-input>
          <!-- 日历 -->
          <el-date-picker
            v-if="field.type === 'date'"
            v-model="model.queryByDate"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            autocomplete="off"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable=""
            align="right"
            @change="v => timechange(v)"
          />
          <!-- 下拉 -->
          <el-select
            v-if="field.type === 'select'"
            v-model="field.value"
            :multiple="field.multiple"
            :placeholder="field.placeholder"
            autocomplete="off"
            clearable
            @change="v => change(field.field, v)"
          >
            <el-option v-for="item in field.options" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
      </template>
    </div>
    <el-form-item class="mt10">
      <el-button type="primary" @click="onSearchSubmit">查询</el-button>
      <el-button type="normal" @click="onReset('model')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { deepClone } from '@/utils/index'
var last = 0
export default {
  components: {
  },
  props: {
    fields: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      model: {}
    }
  },
  watch: {
  },
  created() {
    const obj = {}
    this.fields.forEach(item => {
      item.forEach(field => {
        obj[field.field] = field.value
      })
    })
    this.model = obj
  },
  methods: {
    /**
     * 搜索提交
    */
    onSearchSubmit(v) {
      const params = deepClone(this.model)
      if (this.model.selectInput) {
        params[this.model.selectInput.select] = this.model.selectInput.value
      }
      this.throttle(this.$emit('submit', params), 1000)
      // this.model = {}
    },
    /**
     * 重置
    */
    onReset() {
      // this.$refs.searchForm.resetFields()
      this.model = {}
      this.$emit('submit', null)
    },
    /**
     * 组件change
    */
    change(field, v) {
      this.model[field] = v
    },
    /**
     * 时间
    */
    timechange(v) {
      this.model.queryByDate = v
    },
    /** *
     * 下拉搜索下拉菜单change
    */
    selectInputSelectChange(field, v) {
      this.model[field].select = v
    },
    /**
     * 下拉搜索 搜索框change
    */
    selectInputChange(field, v) {
      this.model[field].value = v
    },
    /**
     * 节流函数
     */
    throttle(fn, delay) {
      return (function(...args) {
        var nowTime = Date.now()
        if (nowTime - last > delay) {
          last = nowTime
          fn.call(this, args)
        }
      })()
    }
  }
}
</script>

<style lang="scss" >
</style>
